<template>
  <div class="zong">
    <!-- 左边 -->
    <div class="left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item :title="v.bigtitle" v-for="(v, i) in arr" :key="i" @click="fun(i)"/>
      </van-sidebar>
    </div>
    <!-- 右边的 -->
    <div class="right">
      <img class="imga" :src="imga"/>
      <Classifyzu :newarr="arr2"/>
    </div>
  </div>
</template>

<script>
import { classifyzu } from "@/api/classifyapi.js";
import { classifyzu1 } from "@/api/classifyapi.js";
import { classifyzu2 } from "@/api/classifyapi.js";
import Classifyzu from "@/components/classifyzu.vue"
export default {
  data() {
    return {
      activeKey: 0,
      arr: [],
      arr2:[],
      imga:[],
    };
  },
  components:{
     Classifyzu
  },
  methods: {
    fun(val){
      // console.log("下标",val)
    // this.arr2=this.arr.dataa[val];
    this.arr2=this.arr[val].dataa;
    // console.log(this.arr2)
    // console.log(this.arr[val].dataa)
    this.imga=this.arr[val].imga;
    }
  },
  mounted() {
    //左侧的数据
    classifyzu().then((ok) => {
      // console.log(ok.data) 
      this.arr.push(ok.data);
      this.arr2=this.arr[0].dataa;
        this.imga=this.arr[0].imga;
      //  console.log("left",ok.data.dataa)
    });
    classifyzu1().then((ok) => {
      // console.log(ok.data.data) 
      this.arr.push(ok.data);
      //  console.log("left",ok.data.dataa)
    });
    classifyzu2().then((ok) => {
      // console.log(ok.data.data) 
      this.arr.push(ok.data);
      //  console.log("left",ok.data.dataa)
    });
    // console.log(this.arr)
  },
};
</script>

<style lang="scss" scoped>
.zong{
  width: 100%;
  display: flex;
  background: #f6f6f6;
}
.right{
  width: 100%;
   padding: 0.1rem 0.06rem;
}
.imga{
  width: 2.8rem;
  height: 0.8rem;
  border-radius: 0.15rem;
}


</style>

